<template>
	<div class="varity">
		<top show="true" title='品种'></top>
		<ul class="varity-list">
			<li v-for="(item,index) in varityArray" v-bind:style="index==current?{color:'#fff',background:'#75CCC7'}:''" @click="checkVarity(index,item.name)">
				{{item.name}}
			</li>
		</ul>
	</div>
</template>

<script>
	import top from '@/components/top.vue'
	export default {
		data() {
			return {
				current: -1,
				checkNmae: '布偶猫',
				varityArray: [{
					name: '布偶猫'
				}, {
					name: '苏格拉折耳猫'
				}, {
					name: '英国短毛猫'
				}, {
					name: '波斯猫'
				}, {
					name: '俄罗斯蓝猫'
				}, {
					name: '美国短毛猫'
				}, {
					name: '异国短毛猫'
				}]
			}
		},
		components: {
			top
		},
		methods: {
			checkVarity(index, name) {
				this.current = index;
				this.checkNmae = name;
				this.$store.commit('getCheckVarityName', name)
			}
		},
		created() {
			console.log(this.$store.state.checkVarityName)
		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.varity-list {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
		padding: 0 px2vw(45);
	}

	.varity-list li {
		height: px2vw(30);
		line-height: px2vw(30);
		padding: 0px px2vw(12);
		box-sizing: border-box;
		background: #F3F9F9;
		border: 1px solid #9CD0D5;
		border-radius: px2vw(15);
		font-size: px2vw(13);
		color: rgba(60, 159, 151, 1);
		margin-right: px2vw(8);
		margin-bottom: px2vw(15);

	}
</style>
